<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <input id="inp" type="text" oninput="change(event)" />
    <h1 id="box"></h1>
    <!-- <button onclick="handler()">点击</button> -->
    <script>
        let obj = {
            msg: "hello world",
            name: "小明",
        };
        let inp = document.querySelector("#inp");
        let box = document.querySelector("#box");

        inp.value = obj.msg;
        box.innerHTML = obj.msg;
        Object.defineProperty(obj, "msg", {
            set(val) {
                console.log(val);
                box.innerHTML = val;
            },
            get() {},
        });

        // function handler() {
        //     // console.log(1111);
        //     obj.msg = "3333";
        // }
        function change(e) {
            // console.log(e.target.value);
            obj.msg = e.target.value;
        }
    </script>
</body>

</html>